<template>
    <div class="nursery-wrapper" :style="{ height: height+'px'}">

      <!--已完成接种-->
      <div class="been-completed">
          <img src="../../../static/images/check/isCompleted0.png" class="full-img" v-if="isCompleted==0">
          <img src="../../../static/images/check/isCompleted1.png" class="full-img" v-else-if="isCompleted==1">
          <div class="top-name">
            <img src="../../../static/images/login/registered.png" class="portrait">
            <div class="name-age">
              <h4>欧阳振文</h4>
              <p>1岁6个月</p>
            </div>
            <a class="switch-btn" @click="switchPopup=true">切换</a>
          </div>
          <div class="proccess-con">
            <h4>100<span>%</span></h4>
            <div>- 接种进度 -</div>
          </div>

          <div class="center" @click="goCompleted">
             <img src="../../../static/images/check/completed-text.png" class="completed-text" v-if="isCompleted==0">
            <img src="../../../static/images/check/completed-text2.png" class="completed-text" v-else-if="isCompleted==1">

             <img src="../../../static/images/check/illustrations.png" class="illustrations">
          </div>
      </div>


      <div class="footer-center">
        <p>点击按钮即可查看已完成接种记录。</p>
        <p>长按保存在手机后，发送到电脑上可直接打印。</p>
      </div>

    </div>
</template>

<script>
    export default {
        name: "nursery",
        data(){
          return {
            isCompleted:0,
            switchPopup:false,
            height:document.documentElement.clientHeight,
          }
        },
        metaInfo () {
          return {
            title: '入托/学查验'
          }
        },
      methods:{
        goCompleted(){
          if(this.isCompleted==0){
            this.$router.push('/completed')
          }
        }
      }
    }
</script>

<style lang="scss">
    .nursery-wrapper{
      background: #F7F5F5;
      width:100%;
      height: 100%;
        .been-completed{
          position: relative;
          .top-name{
            position: absolute;
            top:16px;
            padding:0 15px;
            width:90%;
            .portrait{
              width:40px;
              height:40px;
              border-radius:50%;
              vertical-align: middle;
            }
            .name-age{
              display: inline-block;
              vertical-align: middle;
              h4{
                font-size:15px;
                font-family:PingFang-SC-Bold;
                font-weight:normal;
                color:rgba(255,255,255,1);
              }
              p{
                font-size:15px;
                font-family:PingFang-SC-Bold;
                font-weight:normal;
                color:rgba(255,255,255,1);
                margin-top:6px;
              }
            }
            .switch-btn{
              display: inline-block;
              text-align: center;
              float: right;
              width:44px;
              height:22px;
              line-height: 22px;
              border:1px solid #FFFFFF;
              border-radius:10px;
              font-size:12px;
              font-family:PingFang-SC-Regular;
              font-weight:bold;
              color:#FFFFFF;
              margin-top: 6px;
            }
          }
          .proccess-con{
            position: absolute;
            top:20%;
            width:100%;
            color:#fff;
            text-align: center;
            h4{
              font-size:50px;
              font-family:PingFang-SC-Bold;
              font-weight:bold;
              color:rgba(255,255,255,1);
              span{
                font-size:15px;
                font-family:PingFang-SC-Regular;
                font-weight:400;
                color:rgba(255,255,255,1);
                margin-left:3px;
              }
            }
            div{
              font-size:15px;
              font-family:PingFang-SC-Regular;
              font-weight:400;
              color:rgba(255,255,255,1);
              margin-top:9px;
            }
          }
          .center{
            background:rgba(255,255,255,1);
            box-shadow:0px 0px 24px 2px rgba(50,51,51,0.06);
            border-radius:10px;
            width:80%;
            margin:38px auto 0;
            padding:7px 20px;
            .completed-text{
              width:40%;
              vertical-align: middle;
            }
            .illustrations{
              width:50%;
              vertical-align: middle;
            }
          }
        }
        .footer-center{
          position: absolute;
          bottom: 50px;
          font-size:12px;
          font-family:PingFang-SC-Regular;
          font-weight:400;
          color:rgba(122,122,122,1);
          width:100%;
          text-align: center;
          p{
            &:first-child{
              margin-bottom: 4px;
            }
          }
        }
    }
</style>
